<template>
    <div class="benner-show">
        <div class="swiper container" ref="swiper">
            <div class="swiper-wrapper">
                <template v-for="item in list">
                    <div class="swiper-slide" :key="item.bannerid" v-if="item.flag">
                        <a :href="item.link">
                            <img :src="item.img" alt="">
                        </a>
                    </div>
                </template>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>
    </div>
</template>

<script>
/* 
    使用swiper
    1. 先下载
       npm i swiper@8.2.2 -S
    
    2. 在引入 
       import swiper from "swiper";

       style => 
       老版本(swiper v8以下)
       @import "swiper/swiper-bundle.min.css";   
       
       新版本(swiper v8以下)
       @import "swiper/css/bundle"

    3. 在使用
       a. 先写html结构

       b. 创建swiper实例
 
*/

// import * as obj from "swiper";
// console.log("obj",obj);

import swiper,{Autoplay,Pagination,Navigation} from "swiper";
import { getBannerListAPI } from '@/api/banner';
export default {
    name: "BannerShowView",
    data() {
        return {
            list: [],
            swiper:null,
        }
    },
    methods: {
        async getBannerList() {
            try {
                var res = await getBannerListAPI();
                console.log("获取banner列表", res);
                this.list = res.data;
            } catch (err) {
                this.$message.error(err.message)
            }
        },
        initSwiper(){
            console.log("swiper初始化");
            this.swiper = new swiper(this.$refs.swiper,{
                // direction: 'vertical', // 垂直切换选项
                loop: true, // 循环模式选项
                autoplay:true,

                observer:true,   // 监听元素自身的变化 => 重新初始化
                observeParents:true,  // 监听父元素的变化 => 重新初始化

                modules:[Autoplay,Pagination,Navigation],  // 在当前swiper实例中使用 自动轮播 分页 
                
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                    clickable :true,  // 点击 点 => 进行切换
                },
                
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                
                // 如果需要滚动条
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
            })
        }
    },
    watch:{
        list:function(){
            console.log("list请求成功");

            // list数据改变 到视图更新也是异步的 => 等视图更新之后重新初始化
            // setTimeout(()=>{
            //     this.swiper.destroy();  // 先销毁原本的swiper实例
            //     this.initSwiper();  // list数据改变之后 重新初始化swiper 
            // })

            this.$nextTick(()=>{
                this.swiper.destroy();  // 先销毁原本的swiper实例
                this.initSwiper();  // list数据改变之后 重新初始化swiper 
            })
            
        },
    },
    mounted() {
        this.getBannerList(); // 请求数据 => 异步操作
        this.initSwiper();  // 初始化swiper 
    }
}
</script>

<style lang="scss" scoped>
// sass语法中引入css文件的语法
// @import url("swiper/swiper-bundle.min.css");  //老版本
@import "swiper/css/bundle";

.container {
    width: 100%;
    .swiper-wrapper{
        img{
            width: 100%;
        }
    }
}
</style>